<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API测试页面</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .flower-item { 
            border: 1px solid #ddd; 
            margin: 10px 0; 
            padding: 10px; 
            border-radius: 5px; 
        }
        .flower-image { 
            width: 100px; 
            height: 100px; 
            object-fit: cover; 
            border-radius: 5px; 
        }
        .error { color: red; }
        .success { color: green; }
    </style>
</head>
<body>
    <h1>花仙馆API测试</h1>
    
    <h2>API连接测试</h2>
    <div id="api-status">测试中...</div>
    
    <h2>鲜花列表</h2>
    <div id="flowers-list">加载中...</div>
    
    <h2>分类列表</h2>
    <div id="categories-list">加载中...</div>

    <script>
        const API_BASE = 'http://127.0.0.1:8000/api/v1';
        
        // 测试API连接
        async function testAPI() {
            try {
                const response = await fetch(`${API_BASE}/flowers/`);
                const data = await response.json();
                
                if (response.ok) {
                    document.getElementById('api-status').innerHTML = 
                        '<span class="success">✅ API连接成功</span>';
                    displayFlowers(data.results);
                } else {
                    throw new Error(`HTTP ${response.status}`);
                }
            } catch (error) {
                document.getElementById('api-status').innerHTML = 
                    `<span class="error">❌ API连接失败: ${error.message}</span>`;
            }
        }
        
        // 显示鲜花列表
        function displayFlowers(flowers) {
            const container = document.getElementById('flowers-list');
            if (!flowers || flowers.length === 0) {
                container.innerHTML = '<p>暂无鲜花数据</p>';
                return;
            }
            
            container.innerHTML = flowers.map(flower => `
                <div class="flower-item">
                    <h3>${flower.name}</h3>
                    <p>价格: ¥${flower.price}</p>
                    <p>分类: ${flower.category_name}</p>
                    <p>库存: ${flower.stock}</p>
                    ${flower.main_image ? 
                        `<img class="flower-image" src="${flower.main_image}" alt="${flower.name}" onerror="this.style.display='none'">` : 
                        '<p>暂无图片</p>'
                    }
                    <p>图片链接: ${flower.main_image || '无'}</p>
                </div>
            `).join('');
        }
        
        // 测试分类API
        async function testCategories() {
            try {
                const response = await fetch(`${API_BASE}/flowers/categories/`);
                const data = await response.json();
                
                if (response.ok && data.success) {
                    const container = document.getElementById('categories-list');
                    container.innerHTML = data.data.map(category => `
                        <div class="flower-item">
                            <h4>${category.name}</h4>
                            <p>${category.description}</p>
                        </div>
                    `).join('');
                }
            } catch (error) {
                document.getElementById('categories-list').innerHTML = 
                    `<span class="error">加载分类失败: ${error.message}</span>`;
            }
        }
        
        // 启动测试
        testAPI();
        testCategories();
    </script>
</body>
</html>